<template>
    <div class="box">
     <section>
        <header>
            <i @click="back" class="iconfont back">&#xe663;</i>
            <b>注册</b>
        </header>
        <main>
            <div>
                <p class="iconfont">&#xe62d;</p>
                <input type="text" name="" v-model="username" id="userName" placeholder="手机号/邮箱">
            </div>
            <div>
                <p class="iconfont">&#xe60d;</p>
                <input type="password" v-model="password" id="passWord" placeholder="请输入密码">
            </div>
             <div>
                <p class="iconfont">&#xe656;</p>
                <input type="password" v-model="password1" id="passWord" placeholder="请再次输入密码">
            </div>
            <button id="login" @click="zhuce" class="active">注册</button>
            <button id="regist" @click="login">去登录页</button>
            <p><a href="#">忘记密码?</a></p>
        </main>
       
        <footer>
            <div class="kuai">
                <b></b>
                <p>快速登录</p>
                <b></b>
            </div>
            <div class="lei">
                <p class="iconfont">&#xe61b;</p>
                <p class="iconfont">&#xe612;</p>
                <p class="iconfont">&#xe635;</p>
                <p class="iconfont">&#xe82e;</p>
            </div>
        </footer>
    </section>
     
    </div>
</template>

<script>
import {ajax_register} from '../ajax/index'
export default {
  data() {
    return {
      username: '',
      password: '',
      password1:'',
      yan:'',
      catchas:''
    };
  },
  methods: {
    zhuce(){
        if(this.password==this.password1){
             ajax_register({
            username:`${this.username}`,
            password:`${this.password}`,
          
        }).then(data=>{
            console.log(data);
            if(data.code==1){
                alert(data.msg);
                this.$router.push("/login")
            }
        })
        }else{
            alert("两次密码不一致")
        }
        
      
      
    },
    back(){
      this.$router.push("/");
    },
    login(){
        this.$router.push("/login")
    }
   
  },
  mounted(){
       
  }
};
</script>

<style scoped>
#userName{
    color:rgba(71, 255, 47, 0.712)
}
#passWord{
    color: rgba(157, 9, 243, 0.966);
    
}
#yan{
    color: rgba(255, 166, 0, 0.705);
}
.box{
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url("../img/xf.jpg") no-repeat;
  background-size: 100vw 100vh;
  z-index: 1000;
}
.back{
  position: absolute;
  top: 4vh;
  left:3vh;
  color: white;
}
section {
            width: 100vw;
            height: 100vh;
            background-color: rgba(58, 55, 55, 0.582);
        }
        
        header {
            width: 100vw;
            padding: 1.4rem 0;
            text-align: center;
            margin-bottom: 10vh;
        }
        
        header>b {
            color: white;
            font-size: 1.5rem;
        }
        
        main {
            width: 100vw;
        }
        
        main>div {
            width: 90vw;
            height: 7vh;
            margin: 2.5vh auto;
            display: flex;
            /* align-items: center; */
            border-bottom: 2px solid #9a958f9d;
        }
        
        main>div>p {
            color: #9a958f;
            padding: .8rem 0.4rem 0.1rem 0.4rem;
            font-size: 1.5rem;
            background-color: #5c5e7c41;
        }
        
        main>div>input {
            width: 88vw;
            outline: none;
            text-indent: 10px;
            border: none;
            background-color: #5c5e7c41;
        }
        
        input::-moz-placeholder {
            color: #bd9d83;
            font-size: 1rem;
        }
        
        .active {
            background-color: orange;
        }
        
        button {
            width: 90vw;
            margin: .8rem 0 .8rem 5vw;
            outline: none;
            border: none;
            padding: 1rem 0;
            text-align: center;
            background-color: #9e9e8379;
            border: 2px solid #c0b1995b;
            font-size: 1rem;
            color: white;
        }
        
        main>p {
            width: 90vw;
            margin: 0 auto;
            text-align: end;
        }
        
        main>p>a {
            display: inline-block;
            width: 20vw;
            text-decoration: none;
            font-style: normal;
            padding-bottom: 3px;
            /* text-decoration: underline; */
            color: #a7a8a6;
            border-bottom: 1px solid #a7a8a6;
        }
        
        footer {
            width: 100vw;
            margin: 0 auto;
            margin-top: 10vh;
        }
        
        footer>.kuai {
            width: 100vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .kuai>p {
            color: #a7a8a6;
        }
        
        footer>div>b {
            width: 38vw;
            height: 0;
            border: 1px solid #a7a8a6;
        }
        
        footer>.lei {
            width: 100vw;
            display: flex;
            justify-content: space-evenly;
        }
        
        footer>.lei>p {
            width: 3rem;
            height: 3rem;
            text-align: center;
            line-height: 3rem;
            background-color: #a7a8a6;
            border-radius: 50%;
            color: rgba(0, 0, 0, 0.788);
            font-size: 1.7rem;
        }

</style>